<!-- communication.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #msgFrom {
          width: 300px;
        }
    </style>
</head>
<body>
<div>
    <input type="button" value="发送消息到App" onclick="PostMsgToApp(msgFrom.value);"/><br/>
    <input id="msgFrom" type="text" value="这条消息是从网页侧到应用侧"/><br/>
</div>
<p class="output">显示从应用侧发送的消息</p>
</body>
<script>
    // 声明一个变量 h5Port，用于存储从应用侧发送过来的端口
    var h5Port;
    // 获取网页中 class 为 "output" 的元素
    var output = document.querySelector('.output');
    // 为窗口添加 message 事件监听
    window.addEventListener('message', function (event) {
        // 如果接收到的数据为 '__init_port__'
        if (event.data === '__init_port__') {
            // 并且事件的 ports 数组的第一个元素不为空
            if (event.ports[0] !== null) {
                // 将第一个端口保存到 h5Port 变量中
                h5Port = event.ports[0];
                // 为 h5Port 添加 onmessage 事件监听，用于接收从 ets 侧发送过来的消息
                h5Port.onmessage = function (event) {
                  // 当应用侧有发送过来新的消息时。
                  var msg = '收到消息从应用侧:';
                  var result = event.data;
                  if (typeof(result) === 'string') {
                    console.info(`从应用侧收到的字符串消息: ${result}`);
                    msg = msg + result;
                  } else {
                    console.info('不支持');
                  }
                  output.innerHTML = msg;
                }
            }
        }
    })
    // 定义PostMsgToEts函数，用于通过 h5Port 向应用侧发送消息
    function PostMsgToApp(data) {
        // 如果 h5Port 存在，端口
        if (h5Port) {
          // 使用 postMessage 方法发送数据
          h5Port.postMessage(data);
        } else {
          // 输出错误提示
          console.error('数据通路为空，请初始化');
        }
    }
</script>
</html>

